<template>
  <Modal title="已结账单" :width="1000" :show-confirm-button="false">
    <div class="settled-bills-modal">
      <div class="search-form">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-input
              v-model:value="searchForm.cardNumber"
              placeholder="手牌号"
            />
          </a-col>
          <a-col :span="6">
            <a-input
              v-model:value="searchForm.billNumber"
              placeholder="账单号"
            />
          </a-col>
          <a-col :span="6">
            <a-date-picker
              v-model:value="searchForm.startDate"
              placeholder="起始时间"
              show-time
            />
          </a-col>
          <a-col :span="6">
            <a-date-picker
              v-model:value="searchForm.endDate"
              placeholder="结束时间"
              show-time
            />
          </a-col>
        </a-row>
      </div>

      <div class="bills-table">
        <a-table
          :columns="tableColumns"
          :data-source="billsData"
          :pagination="false"
          size="small"
        />
        <div class="table-footer">
          <span>数量: {{ billsData.length }}</span>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { ref, h } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button } from 'ant-design-vue';

defineOptions({
  name: 'SettledBillsModal',
});

interface Emits {
  (e: 'success'): void;
}

const emit = defineEmits<Emits>();

const searchForm = ref({
  cardNumber: '',
  billNumber: '',
  startDate: null,
  endDate: null,
});

const tableColumns = [
  { title: '账单号', dataIndex: 'billNumber', key: 'billNumber' },
  { title: '手牌号', dataIndex: 'cardNumbers', key: 'cardNumbers' },
  { title: '操作人', dataIndex: 'operator', key: 'operator' },
  { title: '开牌时间', dataIndex: 'openTime', key: 'openTime' },
  { title: '结账时间', dataIndex: 'settleTime', key: 'settleTime' },
  {
    title: '操作',
    key: 'action',
    customRender: ({ record }) => {
      return h('div', { style: { display: 'flex', gap: '8px' } }, [
        h(Button, { type: 'link', size: 'small' }, () => '详情'),
        h(Button, { type: 'link', size: 'small' }, () => '打印'),
      ]);
    },
  },
];

const billsData = ref([
  {
    key: '1',
    billNumber: 'MAS32565104618064638',
    cardNumbers: '1001/1002/1003/1005',
    operator: '王雨涵',
    openTime: '2018/01/01 13:24',
    settleTime: '2018/01/01 20:32',
  },
]);

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    searchForm.value = {
      cardNumber: '',
      billNumber: '',
      startDate: null,
      endDate: null,
    };
  },
});

const handleCancel = () => {
  modalApi.close();
};
</script>

<style scoped>
.settled-bills-modal {
  padding: 20px 0;
}

.search-form {
  padding: 15px;
  margin-bottom: 20px;
  background: #f5f5f5;
  border-radius: 6px;
}

.bills-table {
  margin-bottom: 20px;
}

.table-footer {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}
</style>
